<template>
  <div>
    <van-tabbar route v-model="active" active-color="#fc6627">
      <van-tabbar-item to="/" icon="home-o"
        >首页
        <template #icon="{active}">
          <GeekIcon v-if="active" name="home-sel"></GeekIcon>
          <GeekIcon v-else name="home"></GeekIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/question" icon="search"
        >问答
        <template #icon="{active}">
          <GeekIcon v-if="active" name="qa-sel"></GeekIcon>
          <GeekIcon v-else name="qa"></GeekIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/video" icon="friends-o"
        >视频
        <template #icon="{active}">
          <GeekIcon v-if="active" name="video-sel"></GeekIcon>
          <GeekIcon v-else name="video"></GeekIcon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user" icon="setting-o"
        >我的
        <template #icon="{active}">
          <GeekIcon v-if="active" name="mine-sel"></GeekIcon>
          <GeekIcon v-else name="mine"></GeekIcon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped></style>
